<template>
  <div class="login">
    <!-- 没有登录显示的头像 -->
    <div class="avatar" v-if="!userInfo" @click="showLogin">
      <!-- 显示头像 -->
      <div class="block">
        <el-avatar :size="40" :src="circleUrl"></el-avatar>
      </div>
      <!-- 显示请先登录文字 -->
      <div class="uname">{{ uname }}</div>
    </div>
    <div v-else class="avatar">
      <!-- 显示头像 -->
      <div>
        <el-avatar :size="40" :src="userInfo.avatarUrl"></el-avatar>
      </div>
      <!-- 显示用户名 -->
      <div class="uname" v-popover:popover slot="reference">
        {{ userInfo.nickname }}
        <i class="el-icon-caret-bottom" ></i>
      </div>
    </div>
    <!-- 登录表单弹窗 -->
    <transition name="el-fade-in-linear">
      <LoginPop v-if="isShowLogin" @closeLogin="closeLogin"></LoginPop>
    </transition>
    <!-- 退出登录列表 -->
    <div class="logout">
      <el-popover
        ref="popover"
        placement="bottom"
        width="150"
        trigger="click">
        <ul class="userinfo-list">
          <li @click="logout">
            <span><i class="iconfont icon-tuichu"></i>退出登录</span>
          </li>
        </ul>
      </el-popover>
    </div>
  </div>
</template>
<script>
import LoginPop from './LoginPop.vue'
import { mapState } from 'vuex';
export default {
  name: "",
  components:{LoginPop},
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      uname: "点击头像登录",
      isShowLogin:false
    };
  },
  methods: {
    // 显示登录弹窗
    showLogin(){
     this.isShowLogin = true
    },
    // 关闭登录框回调函数
    closeLogin(){
      this.isShowLogin = false
    },
     // 退出登录
    logout(){
        this.$confirm('你确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '退出登录成功!'
          });
          // 调用退出登录api
          this.$API.login.reqLogout();
          // 更新登录状态
          this.$store.dispatch('updateLogin',false);
          this.removeItem('isLogin')
          // 清空用户信息
          this.$store.dispatch('saveUserInfo',null)
          this.removeItem('userInfo')
          // 清空歌单
          this.$store.dispatch('saveUserSongList',[])
          this.removeItem('userSongList')
          // 清空用户喜欢的音乐id
          this.$store.dispatch('saveLikeSongIds',[])
          this.removeItem('likeSongIds');
          // 跳转到发现音乐
          this.$router.push("/")

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '退出登录失败!'
          });          
        });
    },

  },
  created() {},
  // 计算属性
  computed:{
    ...mapState({
      userInfo:(state)=>{
        return state.login.userInfo;
      }
    })
  }
};
</script>
<style lang="less" scoped>
.login {
  padding-right: 2%;
  .avatar {
    display: flex;
    align-items: center;
    color: #fff;
    cursor: pointer;
    .uname {
      padding-left: 5px;
    }
  }
}
.userinfo-list{
      li{
        height: 30px;
        line-height: 30px;
        &:hover{
          background: rgba(200, 220, 220, 0.4);
        }
      }
    }
</style>